<template>
  <div class="reason-input">
    <el-input
      v-model="inputValue"
      type="textarea"
      :rows="5"
      placeholder="请输入未完成原因"
      class="input-box"
      clearable
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  modelValue: string
}>()
const emits = defineEmits(['update:modelValue'])

const inputValue = ref(props.modelValue)

watch(() => props.modelValue, (val) => {
  inputValue.value = val
})
watch(inputValue, (val) => {
  emits('update:modelValue', val)
})
</script>

<style scoped>
.reason-input {
  background: #14233c;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #fff;
  margin-top: 4px;
  height:260px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #00eaff;
}
.input-box {
  background: #1a2b47;
  color: #fff;
  border: 1px solid #0C83CF;
  border-radius: 6px;
}
:deep(.el-textarea__inner) {
  background: #1a2b47;
  color: #fff;
  height: 260px;
}
</style>
